<template>
  <BaseFilter class="radio-filter" :label="label">
    <template #right>
      <van-row type="flex" align="center">
        <span class="select">{{ selectString }}</span>
        <van-icon :name="isExpand ? 'arrow-down' : 'arrow-up'" color="#999999" size="12px" @click="isExpand = !isExpand">
          <span style="margin-right: 5px;">{{ isExpand ? '收起' : '展开' }}</span>
        </van-icon>
      </van-row>
    </template>
    <van-row gutter="8">
      <van-col :span="8" v-for="data in validDataList" :key="data[prop.value]">
        <div class="radio-item" :class="{active: value === data[prop.value]}" @click="onChange(data)">
          {{ data[prop.label] }}
        </div>
      </van-col>
    </van-row>
  </BaseFilter>
</template>

<script>
import { findItemFromList } from '@/utils';
import BaseFilter from './BaseFilter.vue';

export default {
  name: 'radioFilter',
  props: {
    value: {
      type: [String, Number, Boolean]
    },
    label: {
      type: String
    },
    dataList: {
      type: Array,
      default: () => []
    },
    prop: {
      type: Object,
      default: () => {
        return {
          value: 'id',
          label: 'name'
        }
      }
    }
  },
  components: {
    BaseFilter
  },
  data () {
    return {
      isExpand: false
    }
  },
  methods: {
    onChange (data) {
      this.$emit('input', data[this.prop.value]);
      this.$emit('change', data[this.prop.value]);
    }
  },
  computed: {
    validDataList () {
      if (!Array.isArray(this.dataList)) return [];
      return this.isExpand ? this.dataList : this.dataList.slice(0, 6);
    },
    selectString () {
      let node = findItemFromList(this.dataList, this.value, this.prop.value);
      return node ? node[this.prop.label] : '';
    }
  }
}
</script>

<style scoped>
  .radio-filter .van-icon-arrow-down:before {
    content: none;
  }
  .radio-filter .van-icon-arrow-down:after {
    content: '\e65e';
  }
  .radio-filter .van-icon-arrow-up:before {
    content: none;
  }
  .radio-filter .van-icon-arrow-up:after {
    content: '\e65f';
  }
  .radio-item {
    margin-top: 8px;
    height: 36px;
    line-height: 36px;
    background: #F6F7F9;
    border-radius: 4px 4px 4px 4px;
    text-align: center;
    color: #333333;
    cursor: pointer;
    box-sizing: border-box;
  }
  .radio-item.active {
    background: #FDF2E6;
    color: #FF7700;
    border: 1px solid #FF7700;
  }
  .select {
    color: #FF7700;
    font-size: 12px;
    margin-right: 5px;
    height: 17px;
    line-height: 17px;
  }
</style>
